<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>资金流水</title>
  <link rel="stylesheet" type="text/css" href="./css/api.css" />
  <link rel="stylesheet" type="text/css" href="./css/aui.css" />
  <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript" src="./script/api.js"></script>
  <script type="text/javascript" src="./script/aui-tab.js" ></script>
  <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
  <script type="text/javascript" src="./script/aui-slide.js"></script>
  <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
  <script type="text/javascript">
    function closeWin(){
      api.closeWin({
      });
    };
  </script>
</head>
<body>
  <!-- 头部 -->
  <header class="aui-bar aui-bar-nav pos">
    <a class="aui-pull-left aui-btn" onclick="closeWin()">
      <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
      <i class="fa fa-chevron-circle-left plr05" onclick="lastMonth();"></i>
      <em id="year">2017</em>-
      <em id="month">09</em>
      <i class="fa fa-chevron-circle-right plr05" onclick="nextMonth();"></i>
    </div>
  </header>
  <div class="header-d"></div>
  <div id="list">
    <div class="cash-list">
<!--       <div class="cash-list-t">
       2017年09月
       <div class="cash-list-t-l">
         <a  tapmode onclick="my_fund_bill()">年账单</a>
         <a >月账单</a>
       </div>
     </div> -->
     <ul>
       <li class="cash-list-1">
         <div class="aui-col-xs-2">
           <span>支</span>
         </div>
         <div class="aui-col-xs-5 cash-list-m">
          提现手续费
          <p>0000-00-00 00:00:00</p>
        </div>
        <div class="aui-col-xs-5 cash-list-r">
         账户余额:00.00
         <p>支出:-0.00</p>
       </div>
     </li>
     <li class="cash-list-2">
       <div class="aui-col-xs-2">
         <span>支</span>
       </div>
       <div class="aui-col-xs-5 cash-list-m">
        提现手续费
        <p>0000-00-00 00:00:00</p>
      </div>
      <div class="aui-col-xs-5 cash-list-r">
       账户余额:00.00
       <p>支出:-0.00</p>
     </div>
   </li>
   <li class="cash-list-3">
     <div class="aui-col-xs-2">
       <span>支</span>
     </div>
     <div class="aui-col-xs-5 cash-list-m">
      提现手续费
      <p>0000-00-00 00:00:00</p>
    </div>
    <div class="aui-col-xs-5 cash-list-r">
     账户余额:00.00
     <p>支出:-0.00</p>
   </div>
 </li>
 <li class="cash-list-4">
   <div class="aui-col-xs-2">
     <span>支</span>
   </div>
   <div class="aui-col-xs-5 cash-list-m">
    提现手续费
    <p>0000-00-00 00:00:00</p>
  </div>
  <div class="aui-col-xs-5 cash-list-r">
   账户余额:00.00
   <p>支出:-0.00</p>
 </div>
</li>
</ul>
</div>
</div>
</body>
<script type="text/template" id="template">
  <div class="cash-list">
    <div class="cash-list-t">
     2017年07月
     <div class="cash-list-t-l">
       <a  tapmode onclick="my_fund_bill()">年账单</a>
       <a >月账单</a>
     </div>
   </div>
   <ul>
     <li class="cash-list-1">
       <div class="aui-col-xs-2">
         <span>支</span>
       </div>
       <div class="aui-col-xs-5 cash-list-m">
        提现手续费
        <p>2017-07-10 12:06:02</p>
      </div>
      <div class="aui-col-xs-5 cash-list-r">
       账户余额:17.20
       <p>支出:-1000.00</p>
     </div>
   </li>
   <li class="cash-list-2">
     <div class="aui-col-xs-2">
       <span>支</span>
     </div>
     <div class="aui-col-xs-5 cash-list-m">
      提现手续费
      <p>2017-07-10 12:06:02</p>
    </div>
    <div class="aui-col-xs-5 cash-list-r">
     账户余额:17.20
     <p>支出:-1000.00</p>
   </div>
 </li>
 <li class="cash-list-3">
   <div class="aui-col-xs-2">
     <span>支</span>
   </div>
   <div class="aui-col-xs-5 cash-list-m">
    提现手续费
    <p>2017-07-10 12:06:02</p>
  </div>
  <div class="aui-col-xs-5 cash-list-r">
   账户余额:17.20
   <p>支出:-1000.00</p>
 </div>
</li>
<li class="cash-list-4">
 <div class="aui-col-xs-2">
   <span>支</span>
 </div>
 <div class="aui-col-xs-5 cash-list-m">
  提现手续费
  <p>2017-07-10 12:06:02</p>
</div>
<div class="aui-col-xs-5 cash-list-r">
 账户余额:17.20
 <p>支出:-1000.00</p>
</div>
</li>
</ul>
</div>
</script>
<script type="text/javascript">

  apiready = function(){
    getYearAndMonth();  
    updateData();
  }

  // 更新数据,模板函数
  function updateData(data){

    // 进度提示款
    api.showProgress({
      title: '努力加载中...',
      text: '先喝杯茶...',
      modal: false
    });

    api.ajax({
      url: 'http://192.168.1.101:3101/upLoad',
      method: 'post',
      data: {
        values: { 
          name: 'haha'
        },
      }
    },function(ret, err){
      if (ret) {
     // 关闭下拉刷新控件
     api.refreshHeaderLoadDone();
     api.hideProgress();
     if (ret.status == 0) {
      alert(ret.info);
      return false;
    }else{

    }
  } else {
    alert(err.msg);
    api.refreshHeaderLoadDone();
    api.hideProgress();
  }
});
  };


  // 模板赋值函数
  function templateFun(data){
    var template = $api.byId('template');
    var dotFn = doT.template(template.innerHTML);
    var html = dotFn(data);
    var user = $api.byId('list');
    $api.html(user, html);
  }

  // 下拉刷新
  function pullRefresh(){
    api.setRefreshHeaderInfo({
    // loadingImg: 'widget://image/refresh.png',
    bgColor: '#ccc',
    textColor: '#fff',
    textDown: '下拉刷新...',
    textUp: '松开刷新...'
  }, function(ret, err) {
    //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
    updateData();
  });
  }

  // 上拉加载
  function pullLoading(){
    api.addEventListener({
      name: 'scrolltobottom',
      extra: {
        threshold: 0
      }
    }, function(ret, err){
     updateData();
   });
  }


  // 获取当前年月
  function getYearAndMonth(){
    //获取完整的日期
    var date=new Date;
    year=date.getFullYear(); 
    month=date.getMonth()+1;
    month = (month<10 ? "0"+month:month); 
    var yearEle = $('#year');
    yearEle.text(year);
    var monthEle = $('#month');
    monthEle.text(month);
  }

  // 上月按钮
  function lastMonth(){

    var yearEle = $('#year');
    var yearVal = yearEle.text();
    // 年份字符串转化为数字
    yearVal = parseInt(yearVal);

    var monthEle = $('#month');
    var monthVal = monthEle.text();
    var a = monthVal.substring(0,1);
    var b = monthVal.substring(1,2);
    a = parseInt(a);
    b = parseInt(b);

    if (a == 0) {
      if (b != 0) {
        if (b == 1) {
          a = 1;
          b = 2;
          monthVal = ''+a+b;
          month = monthVal;
          monthEle.text(monthVal);
          yearVal = yearVal - 1;
          year = yearVal;
          yearEle.text(yearVal);
        } else {
          b = b - 1;
          monthVal = ''+a+b;
          month = monthVal;
          monthEle.text(monthVal);
        }
      }
    } else {
      if (b == 0) {
        a = 0;
        b = 9;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
      } else {
        b = b - 1;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
      }
    }

    var date = year+'-'+month;
        // updateData(date);
      }

// 下月按钮
function nextMonth(){

  var yearEle = $('#year');
  var yearVal = yearEle.text();
    // 年份字符串转化为数字
    yearVal = parseInt(yearVal);

    var monthEle = $('#month');
    var monthVal = monthEle.text();
    var a = monthVal.substring(0,1);
    var b = monthVal.substring(1,2);
    a = parseInt(a);
    b = parseInt(b);

    if (a == 0) {
      if (b == 9) {
        a = 1;
        b = 0;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
      } else {
        b = b + 1;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
      }
    } else {
      if (b == 2) {
        a = 0;
        b = 1;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
        yearVal = yearVal + 1;
        year = yearVal;
        yearEle.text(yearVal);
      } else {
        b = b + 1;
        monthVal = ''+a+b;
        month = monthVal;
        monthEle.text(monthVal);
      }
    }

    var date = year+'-'+month;
    // updateData(date);
  }
</script>
</html>